<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% include "component/static_resource_css.html" %}
    <title>{{ user.username }} - 关注</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    {% include 'component/header.html' %}

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="position-relative">
                <!-- 选项 -->
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a class="nav-link position-relative active" href="/user/followees/{{ user.id }}">
                            <i class="text-info">{{ user.username }}</i> 关注的人</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link position-relative" href="/user/followers/{{ user.id }}">
                            关注 <i class="text-info">{{ user.username }}</i> 的人</a>
                    </li>
                </ul>
                {% if user.id == user.cu_id %}
                    <a href="/user/profile/{{ user.id }}"
                       class="text-muted position-absolute rt-0">返回个人主页&gt;</a>
                {% endif %}
            </div>
            <!-- 关注列表 -->
            <ul class="list-unstyled">
                {% for followee in followee_all %}
                    <li class="media pb-3 pt-3 mb-3 border-bottom position-relative">
                        <a href="/user/profile/{{ followee.id }}">
                            <img src="{{ followee.header_url }}" class="mr-4 rounded-circle user-header" alt="用户头像">
                        </a>
                        <div class="media-body">
                            <h6 class="mt-0 mb-3">
                                <span class="text-success">
                                    <a href="/user/profile/{{ followee.id }}">{{ followee.username }}</a>
                                    </span>
                                <span class="float-right text-muted font-size-12">
									关注于 <i>{{ followee.like_create_time }}</i></span>
                            </h6>
                            <div>
                                {% if followee.like == 1 %}
                                    <button type="button"
                                            class="btn-sm float-right mr-5 follow-btn btn-info btn-info like01"
                                            id="follower1_{{ followee.id }}">
                                        已关注
                                    </button>
                                {% else %}
                                    <button type="button"
                                            class="btn-sm float-right mr-5 follow-btn btn-secondary like01"
                                            id="follower2_{{ followee.id }}">
                                        关注TA
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:replace="index::pagination"></nav>
        </div>
    </div>

    <!-- 尾部 -->
    {% include "component/footer.html" %}

</div>
{% include "component/static_resource_js.html" %}
</body>
</html>
